การใช้งาน AJAX ในการอัปเดทฐานข้อมูลในอีกรูปแบบหนึ่ง
เป็นการประยุกต์ใช้ Auto Update โดยเป็นตัวอย่างการอัปเดทการเลือก ที่นั่ง ในโรงภาพยนตร์ โดยที่เพียงแต่คลิก ที่หมายเลขที่นั่ง ก็เป็นการเลือกที่นั่งแล้ว
หน้า seat.php เป็นหน้าสำหรับจัดการแสดงที่นั่ง
หน้า save.php สำหรับบันทึกข้อมูลลง db
ฐานข้อมูล mydb - ตาราง sample ทำงานอยู่บน localhost
<?
//ค่ากำหนดของ ฐานข้อมูล
$host="localhost";
$username="root";
$password="";
$dbname="mydb";
$table="sample";
//เชื่อมต่อกับ MySQL
$connect= mysql_connect( $host, $username, $password) or die("ไม่สามารถเชื่อมต่อฐานข้อมูลได้");
$db=mysql_select_db($dbname) or die("ฐานข้อมูลไม่ถูกต้อง");
//คำสั่ง SQL ให้อ่านฐานข้อมูล
$sql="SELECT * FROM $table ORDER BY ID";
//Query ฐานข้อมูล
$query=mysql_query($sql) or die("ไม่สามารถอ่านฐานข้อมูลได้");
//จำนวนข้อมูลทั้งหมดที่อ่านได้
$num_rows=mysql_num_rows($query);
?>
<head>
<title>AJAX กับ Check box</title>
</head>
<body>
<div id=status> </div>
<table border="0" cellspacing="0" cellpadding="0">
<?
for ($i=0; $i<$num_rows; $i++) {
$result=mysql_fetch_array($query);
if ($result[sel]==1) echo "<tr><td id=$result[id]><font color=red>$result[id]</font></td></tr>
";
else echo "<tr><td id=$result[id]><a href=\"javascript:doClick('$result[id]');\">$result[id]</a></td></tr>
";
}
?>
</table>
<?
//ยกเลิกการติดต่อกับฐานข้อมูล
mysql_close($connect);
?>
<form name=frm_send>
<input type=text name=user> <input type=text name=seat> <input type=button value=ตกลง onClick="send();">
</form>
</body>
</html>
<script>
//AJAX สำหรับจัดการบันทึกลงฐานข้อมูล
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
try { return new XMLHttpRequest(); } catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
//คำสั่งที่ทำเมื่อคลิก checkbox
function doClick(id) {
if (frm_send.seat.value=="") frm_send.seat.value=id
else frm_send.seat.value=frm_send.seat.value+','+id
}
function send(chk) {
var req = Inint_AJAX();
var user=frm_send.user.value;
var seat= frm_send.seat.value;
req.open('GET', 'save.php?user='+user+'&seat='+seat, true);
req.onreadystatechange = function() {
if (req.readyState==4) {
if (req.status==200) {
var data=req.responseText;
//แสดง error ถ้ามี
document.getElementById("status").innerHTML=data;
frm_send.seat.value="";
frm_send.user.value="";
}
}
};
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); // set Header
req.send(null);
}
</script>หน้า seat.php เป็นหน้าสำหรับจัดการแสดงที่นั่ง
<?
//header ยกเลิกการใช้ cache ของ IE
header("Expires: Sat, 1 Jan 2005 00:00:00 GMT");
header("Last-Modified: ".gmdate( "D, d M Y H:i:s")."GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
//ค่ากำหนดของฐานข้อมูล
$host="localhost";
$username="root";
$password="";
$dbname="mydb";
$table="sample";
//ค่าที่รับมา
$seat=$_GET["seat];
$user=$_GET["user];
//แยกออกเป็น ID ของ แต่ละที่นั่ง
$seats=explode(",", $seat);
//เชื่อมต่อกับ MySQL
$connect= mysql_connect($host, $username, $password) or die("ไม่สามารถเชื่อมต่อฐานข้อมูลได้");
$db=mysql_select_db($dbname) or die("ฐานข้อมูลไม่ถูกต้อง");
//วนลูปอัปเดทข้อมูลทีละ ID
for ($i=0; $i<count($seats); $i++) {
//คำสั่ง SQL ให้แก้ไขข้อมูล
$sql="UPDATE $table SET sel='1',user='$user' WHERE id='$seats[$i]'";
//แก้ไขข้อมูล
$query=mysql_query($sql) or die("ไม่สามารถแก้ไขฐานข้อมูลได้");
}
//ยกเลิกการติดต่อกับ MySQL
mysql_close($connect);
?> หน้า save.php สำหรับบันทึกข้อมูลลง db
# phpMyAdmin SQL Dump
# version 2.5.7-pl1
# http://www.phpmyadmin.net
#
# โฮสต์: localhost
# เวลาในการสร้าง: 19 ก.ย. 2006 น.
# รุ่นของเซิร์ฟเวอร์: 5.0.16
# รุ่นของ PHP: 4.4.1
#
# ฐานข้อมูล : `mydb`
#
# --------------------------------------------------------
#
# โครงสร้างตาราง `sample`
#
CREATE TABLE `sample` (
`sel` smallint(11) default '0',
`user` text character set utf8 NOT NULL,
`id` text character set utf8 NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=tis620;
#
# dump ตาราง `sample`
#
INSERT INTO `sample` VALUES (0, '', 'A6');
INSERT INTO `sample` VALUES (0, '', 'A5');
INSERT INTO `sample` VALUES (0, '', 'A4');
INSERT INTO `sample` VALUES (0, '', 'A3');
INSERT INTO `sample` VALUES (0, '', 'A2');
INSERT INTO `sample` VALUES (0, '', 'A1');
INSERT INTO `sample` VALUES (1, 'poo', 'A0');
INSERT INTO `sample` VALUES (0, '', 'A7');
INSERT INTO `sample` VALUES (0, '', 'A8');
INSERT INTO `sample` VALUES (0, '', 'A9');ฐานข้อมูล mydb - ตาราง sample ทำงานอยู่บน localhost